<template>
  <div>
    <MyHeadNav>我的合同</MyHeadNav>
    <ul class="box">
      <li>保障房源<i class="iconfont icon-jiantou"></i></li>
      <li @click="clickHandle">
        在线签约<i class="iconfont icon-jiantou"></i>
      </li>
      <van-popup style="width: 80%" v-model="show">
        <ContractInfo />
      </van-popup>
    </ul>
  </div>
</template>

<script>
import MyHeadNav from "../../components/MyNavHead";
import ContractInfo from "./ContractInfo";
export default {
  name: "MyContract",
  components: {
    MyHeadNav,
    ContractInfo,
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    clickHandle() {
      this.show = true;
    },
  },
};
</script>

<style scped lang='less'>
.box {
  width: 100%;
  padding: 0.2rem;
  box-sizing: border-box;
  border: #fff;
  margin-top: 1.2rem;
  li {
    position: relative;
    letter-spacing: 1px;
    text-align: left;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.8);
    width: 100%;
    padding-left: 0.2rem;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    height: 1rem;
    border-radius: 3px;
    line-height: 1rem;
    background: #fff;
    i {
      position: absolute;
      right: 0.3rem;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.3);
    }
  }
}
</style>